<template>
  <div class="main_home">
    <div class="main_home_l">
      <div class="main_home_l_a">
        <dataView></dataView>
      </div>
      <div class="main_home_l_b">
        <menuList></menuList>
      </div>
      <div class="main_home_l_c">
        <chartView></chartView>
      </div>
    </div>
    <div class="main_home_r">
      <div class="main_home_r_A">
        <blanace></blanace>
      </div>
      <div class="main_home_r_a">
        <waitList></waitList>
      </div>
      <div class="main_home_r_b">
        <hotlist></hotlist>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import chartView from "./chartView/index";
import dataView from "./dataView/index";
import hotlist from "./hotList/index";
import menuList from "./menuList/index";
import waitList from "./waitList/index";
import blanace from "./blanace/index";
export default {
  name: "Dashboard",
  components: {
    chartView,
    dataView,
    hotlist,
    menuList,
    waitList,
    blanace,
  },
  data() {
    return {
      deviceImg: "", //require("@/icons/image/device.png"),
    };
  },

  computed: {
    ...mapGetters(["userInfo"]),
    isProduction() {
      return process.env.NODE_ENV == "production";
    },
  },
  watch: {},
  mounted() {},
  methods: {},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$viewH: calc(100vh - 84px);
$viewW: 100%;
$blockMargin: 10px;
.main_home {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
  background-color: #f3f3f3;
  padding: ($blockMargin/2) 0;
  height: $viewH;
  .main_home_l,
  .main_home_r {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-around;
    flex-wrap: wrap;
    height: 100%;
  }
  .main_home_l_a,
  .main_home_l_b,
  .main_home_l_c,
  .main_home_r_A,
  .main_home_r_a,
  .main_home_r_b {
    width: 100%;
    border: 1px solid #eaeaea;
    box-shadow: #aaa 0 0 10px -6px;
    background-color: #fff;
  }
  .main_home_l {
    width: calc((#{$viewW} - #{$blockMargin * 3}) * 0.7);
    .main_home_l_a {
      height: calc((100% - #{$blockMargin * 2}) * 0.23 - #{$blockMargin/2});
    }
    .main_home_l_b {
      height: calc((100% - #{$blockMargin * 2}) * 0.2 - #{$blockMargin/2});
    }
    .main_home_l_c {
      height: calc((100% - #{$blockMargin * 2}) * 0.57);
    }
  }
  .main_home_r {
    width: calc((#{$viewW} - #{$blockMargin * 3}) * 0.3);
    .main_home_r_A {
      height: calc((100% - #{$blockMargin * 2}) * 0.08);
    }
     .main_home_r_a {
      height: calc((100% - #{$blockMargin * 2}) * 0.34);
    }
    .main_home_r_b {
      height: calc((100% - #{$blockMargin * 2}) * 0.57);
    }
  }
}
</style>
